<template>
    <div>
        <el-button-group>
            <el-button type="warning" size="small" @click="bindAddGood"
                >添加</el-button
            >
            <el-button type="warning" size="small" @click="bindRefresh"
                >刷新</el-button
            >
        </el-button-group>

        <!-- 表格 -->
        <el-table
            :data="goodsList"
            style="width: 100%"
        >
            <el-table-column label="ID" prop="id" width="100"></el-table-column>
            <el-table-column label="图片">
                <template #default="scope">
                    <el-image
                        :src="'http://localhost:3000/test/pic?img='+scope.row.img_url"
                        style="width: 100px; height: 100px"
                        ></el-image>
                </template>
            </el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="昵称" prop="nick"></el-table-column>
            <el-table-column label="角色" >
                <template #default="scope">
                    {{ scope.row.role_id == 1 ?`超级管理员`: scope.row.role_id == 2 ? `商品管理员` :`订单管理员` }}
                </template>
            </el-table-column>
            <!-- <el-table-column label="权限" prop="role_id"></el-table-column> -->
            <el-table-column label="操作">
                <template #default="scope">
                    <div class="btnBox">
                        <!-- <el-button
                            type="success"
                            size="small"
                            @click="bindEdit(scope.row)"
                            >编辑</el-button
                        >
     -->
                        <el-popconfirm
                            title="确认要删除此记录吗?"
                            @confirm="bindDelete(scope.row.id)"
                        >
                            <template #reference>
                                <el-button type="primary" size="small"
                                    >删除</el-button
                                >
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹出对话框 -->
        <el-dialog
            :title="type === 'ADD' ? '添加用户' : '编辑用户'"
            v-model="dialogGoodsFormVisible"
            width="40%"
        >
            <UserDialog
                v-if="dialogGoodsFormVisible"
                @close="bindCloseDialog"
                :goods="goods"
                :type="type"
            ></UserDialog>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import axios from 'axios'
import UserDialog from '@/components/UserDialog.vue'
import { ElMessage } from 'element-plus'
import { excelExport2 } from '@/utils/xlsxutil'
import  {baseURL} from '@/utils/request'
export default {
    components: {
        UserDialog,
    },
    data() {
        return {
            goodsList: [],
            dialogGoodsFormVisible: false,
            total: 0, // 总记录条数
            pageSize: 5, // 每页记录条数
            pageNo: 1, // 当前页号
            type: 'ADD', // EDIT 编辑 ADD 添加
            goods: null,
            product: {
                name: '', // 搜索产品名称
                price: '', //搜索产品价格
                shop: '', // 店铺名称
                startPrice: '', //开始价格
                endPrice: '', //结束价格
            },
            ids: '', // 删除商品id 集合
        }
    },
    created() {
        this.getShopList()
    },
    methods: {
        filterUrl(url) {
            return url?.indexOf('http') === -1
                ? baseURL + url
                : url
        },
        /**
         * 操作员列表
         */
        async getShopList() {
            const res = await axios({
                method: 'get',
                url: 'http://localhost:3000/operator/list',
                //post请求参数使用data选项, get参数 params选项
            })
            const { code, info } = res.data
            if (code === 1) {
                this.goodsList = info
            }else{
                this.goodsList = []
            }
        },
        /**
         * 编辑产品
         */
        bindEdit(row) {
            console.log(row)
            this.goods = row
            this.type = 'EDIT'
            this.dialogGoodsFormVisible = true
        },
        /**
         * 删除商品
         */
        async bindDelete(id) {
            const token = localStorage.getItem('TOKEN')
            const data = await axios({
                method: 'post',
                url: 'http://localhost:3000/operator/delete',
                //post请求参数使用data选项, get参数 params选项
                // headers: { 'Authorization':token },
                data: {
                    id
                }
            })
            const { code } = data.data
            if (code === 1) {
                this.getShopList()
                ElMessage({
                    type: 'success',
                    message: '删除成功!',
                })
            }
        },
        /**
         * 添加-弹出添加表单对话框
         */
        bindAddGood() {
            this.type = 'ADD'
            this.dialogGoodsFormVisible = true
        },
        /**
         * 刷新
         */
        bindRefresh() {
            this.product = {} // 重置搜索数据
            this.getShopList()
        },
        bindCloseDialog() {
            this.dialogGoodsFormVisible = false
            this.getShopList()
        },
        /**
         * 页大小改变事件
         */
        bindSizeChange(value) {
            this.pageSize = value
            this.getShopList()
        },
        /**
         * 页号改变事件
         */
        bindCurrentChange(value) {
            this.pageNo = value
            this.getShopList()
        },
        /**
         * 搜索产品
         */
        bindSearch() {
            this.pageNo = 1
            this.getShopList()
        },
        /**
         * 多选
         */
        handleSelectionChange(value) {
            // console.log('value ', value) // [{id:10,name:''}] => [10,12,34] => '10,12,34'
            const list = value.map(item => item.id)
            const ids = list.join(',')
            this.ids = ids
        },
        /**
         * 批量删除
         */
        async bindBatchDelete() {
            // if (this.ids?.split(',').length <= 0) {
            if (!this.ids) {
                console.log('no')
                ElMessage({
                    type: 'info',
                    message: '请选择删除产品',
                })
                return
            }
            console.log(this.ids)
            const res = await axios({
                method: 'post',
                url: 'http://localhost:3000/goods/batchdelete',
                //post请求参数使用data选项, get参数 params选项
                data: {
                    id:this.ids
                }
            })
            const { code } = res.data
            console.log(code)
            if (code === 1) {
                ElMessage({
                    type: 'success',
                    message: '批量删除成功',
                })
                this.getShopList()
            }
        },
        /**
         * 导出excel
         */
        bindExcelExport() {
            excelExport2(
                this.goodsList,
                {
                    id: '序列号',
                    product: '产品名称',
                    shop: '店铺名称',
                    picture: '图片',
                    price: '价格',
                    oldprice: '原价',
                    categoryname: '类型名称',
                },
                '产品列表'
            )
        },
        
    },
}
</script>

<style lang="scss" scoped>
.btnBox{
    display: flex;
    // align-items: center;
    // justify-content: center;
}
</style>
